<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>面向对象版_滑动门</title>
    <link rel="stylesheet" type="text/css" href="CSS/base.css" />
    <link rel="stylesheet" type="text/css" href="CSS/solidBox.css" />
    <script type="text/javascript" src="JS/tool.domElement.js"></script>
    <script type="text/javascript">
        //面向过程 -> 鼠标的事件 执行函数
        //面向对象 -> 选项卡
        //属性 -> 标题对象 内容对象
        //方法 -> 绑定事件的方法 显示内容标题高亮的方法

        //先用面向过程写，再用面向对象
        /*
        * 怎么写特效，牢记一句话：
        * 对象 在何种情况下 发生何种改变
        * 写代码逻辑
        * 1.获取对象
        * 2.绑定事件
        * 3.实现效果
        * */

        //面向过程，针对函数编程，先写一个函数方法
        function solidBox(idName){
            //第一步 获取对象
            var solidBox = document.getElementById(idName) //获取整个盒子
            console.log(solidBox)
            var solidBox_title = solidBox.children[0].children //获取盒子内的标题区
            console.log(solidBox_title)
            var solidBox_content = solidBox.children[1].children //获取盒子内标题所对应的内容区
            console.log(solidBox_content)

            //第二步 绑定事件
            //用一个循环为每一个标题绑定事件。（这里要特别注意理解两个循环在干什么）第一个循环是为每个标题绑定点击事件
            for(let index = 0; index < solidBox_title.length; index++){
                solidBox_title[index].onclick = function (){
                    //第三步实现效果
                    //console.log(index)
                    //再用一个for循环来判断点击的内容，循环内部再实现点击的效果。第二个循环是判断点击的内容，如果不写第二个循环，那么如果有100个点击区域，
                    //就要写100个点击与不被点击的判断逻辑，所以需要第二个循环来实现
                    for(let j = 0; j < solidBox_title.length; j++){
                        if(j === index){ //如果被点击标题的下标，与绑定点击事件的标题的下标一致，则标题高亮，显示相应内容
                            solidBox_title[j].className = "hover"
                            solidBox_content[j].style.display = "block"
                        }else{ //否则，标题不变化，内容不显示
                            solidBox_title[j].className = ""
                            solidBox_content[j].style.display = "none"
                        }
                    }
                }
            }
        }

        //当浏览器加载成功之后执行
        window.onload = function (){
            solidBox("solidBox")
        }

    </script>
</head>

<body>
<!--第1个盒子-->
<div id="solidBox" class="solidBox">
    <h3 class="solidBox_title clearfix">
        <strong class="hover">足球</strong>
        <strong>篮球</strong>
        <strong>其他</strong>
    </h3>
    <div class="solidBox_content">
        <div style="display: block">足球对应的内容</div>
        <div style="display: none">篮球对应的内容</div>
        <div style="display: none">其他对应的内容</div>
    </div>
</div>
<!--第1个盒子-->
<div id="solidBox1" class="solidBox">
    <h3 class="solidBox_title clearfix">
        <strong class="hover">足球</strong>
        <strong>篮球</strong>
        <strong>其他</strong>
    </h3>
    <div class="solidBox_content">
        <div style="display: block">足球对应的内容</div>
        <div style="display: none">篮球对应的内容</div>
        <div style="display: none">其他对应的内容</div>
    </div>
</div>


</body>
</html>
